<template>
  <div class="container">
    <div class="bg-image">
      <div class="bg-title">智慧航道</div>
      <img src="../../static/images/channel-banner.png" alt="">
    </div>
    <!-- <div class="content">
      <div class="singleTitle">全省航道</div>
      <div class="map-content">
        <div class="map"></div>
      </div>      
      <div class="count">        
        <div class="name">航道总里程</div>
        <div class="value">{{ optionData.length && optionData[0].totalMileageOfWaterwayProvince }}公里</div>    
      </div>
      <div class="count">        
        <div class="name">航标总数</div>
        <div class="value">{{ optionData.length && optionData[0].totalNumNavigationMarks }}座</div>    
      </div>
      <div class="count">        
        <div class="name">船闸总数</div>
        <div class="value">{{ optionData.length && optionData[0].totalNumLocks }}座</div>    
      </div>
    </div> -->
    <div class="new-content" @click="handleShow">
      <div class="map">
        <div class="title">全省航道</div>
        <div class="count-info">
          <div class="item">
            <div class="name">航道总里程</div>
            <div class="value">{{ optionData.length && optionData[0].totalMileageOfWaterwayProvince }}公里</div>
          </div>
          <div class="item">
            <div class="name">航标总数</div>
            <div class="value">{{ optionData.length && optionData[0].totalNumNavigationMarks }}座</div>
          </div>
          <div class="item">
            <div class="name">船闸总数</div>
            <div class="value">{{ optionData.length && optionData[0].totalNumLocks }}座</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">应用专栏</div>
      <div class="list">
        <div class="item">
          <router-link to="/waterwayGeneralization">
            <div class="icon">
              <img src="../../static/images/icon-one.png" alt="">
            </div>
            <div class="name">航道概况</div>
          </router-link>
        </div>
        <!-- <div class="item">
          <router-link to="/administrative">
            <div class="icon">
              <img src="../../static/images/icon-eleven.png" alt="">
            </div>
            <div class="name">行政许可</div>
          </router-link>
        </div> -->
        <div class="item">
          <router-link to="/navigationMark">
            <div class="icon">
              <img src="../../static/images/icon-two.png" alt="">
            </div>
            <div class="name">航标概况</div>
          </router-link>
        </div>
        <div class="item">
          <router-link to="/wisdomShiplock">
            <div class="icon">
              <img src="../../static/images/icon-three.png" alt="">
            </div>
            <div class="name">智慧船闸</div>
          </router-link>
        </div>
        <div class="item">
          <router-link to="/shipSurvey">
            <div class="icon">
              <img src="../../static/images/icon-four.png" alt="">
            </div>
            <div class="name">船舶概览</div>
          </router-link>
        </div>
        <div class="item">
          <router-link to="/bridgeHeight">
            <div class="icon">
              <img src="../../static/images/icon-five.png" alt="">
            </div>
            <div class="name">桥梁净高监测</div>
          </router-link>
        </div>
        <div class="item">
          <router-link to="/waterLevel">
            <div class="icon">
              <img src="../../static/images/icon-six.png" alt="">
            </div>
            <div class="name">水位监测</div>
          </router-link>
        </div>    
        <div class="item">
          <router-link to="/videoSurveillance">
            <div class="icon">
              <img src="../../static/images/icon-seven.png" alt="">
            </div>
            <div class="name">视频监控</div>
          </router-link>
        </div>
      
        <!-- <div class="item">
          <router-link to="/wisdom">
            <div class="icon">
              <img src="../../static/images/icon-one.png" alt="">
            </div>
            <div class="name">智慧航道</div>
          </router-link>
        </div> -->
        <!-- <div class="item">
          <a :href="linkSettings.bridgeArea">
            <div class="icon">
              <img src="../../static/images/icon-eight.png" alt="">
            </div>
            <div class="name">水上桥区管控</div>
          </a>
        </div>
        <div class="item">
          <a :href="linkSettings.gateDam">
            <div class="icon">
              <img src="../../static/images/icon-nine.png" alt="">
            </div>
            <div class="name">闸坝智能调度与安全监测</div>
          </a>
        </div>
        <div class="item" @click="showToast('专题建设中')">
          <div class="icon">
            <img src="../../static/images/icon-ten.png" alt="">
          </div>
          <div class="name">琼州海峡保畅通系统联动</div>
        </div>  -->
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div>航道通告专栏</div>
        <!-- <div class="pass-through">
          行政许可事件通过数
          <span class="number">{{ adminApprovalData || "--" }}件</span>
        </div> -->
        <router-link to="/notice">
          <div class="more">更多<img src="../../static/images/more-icon.png" alt=""></div>
        </router-link>        
      </div>
      <div class="notice" v-for="(item,index) in noticeData" :key="index">
        <div @click="handleClick(item.linkurl)">
          <div class="top">{{ item.title }}</div>
          <div class="bottom">
            <div class="source">来源:{{ item.source }}</div>
            <div class="release-time">发布时间:{{ item.time }}</div>
          </div>
        </div>
      </div>
    </div>   
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div>  
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from "vue";
  import { useRouter } from "vue-router";
  // 引入api
  import {
    getProvinceWaterwayData, //获取全省航道相关数据
    getWaterwayNoticeThree, //获取航道通告专栏前3条信息
    adminApproval, //行政许可事项通过数
  } from "../../utils/apis";
  import { api as viewerApi } from 'v-viewer'
  import mapJpg from '../../static/images/big-map.jpg' 
  const router = useRouter();

  import { showToast } from "vant";
  const handleShow = () => {
    viewerApi({ images: [mapJpg] })    
  };

  const optionData = ref([]);
  const getProvinceWaterwayDataFn = () => {
    return new Promise((resolve, reject) => {
      getProvinceWaterwayData().then((res) => {
        if(res.code === 200 && res.data.length){
          resolve(res.data);
        }      
      });
    });
  };

  const noticeData = ref([]);
  const getWaterwayNoticeThreeFn = () => {
    return new Promise((resolve, reject) => {
      getWaterwayNoticeThree().then((res) => {
        if(res.code === 200 && res.data.length){           
          resolve(res.data);  
        }
      });
    });   
  };

  const adminApprovalData = ref(0);
  const adminApprovalFn = () => {
    return new Promise((resolve, reject) => {
      adminApproval().then((res) => {
        if(res.code === 200 && res.data.counts.length){           
          resolve(res.data.counts[0]['count(1)']); 
        }
      });
    });     
  };

  const linkSettings = ref({});
  const getLinkSettings = () => {
    let accessToken = sessionStorage.getItem('access_token');
    let settings = {
      bridgeArea: '/traffic-channel/bridge/small-screen/#/bridgeAreaControl-overall?access_token=' + accessToken,
      gateDam: '/traffic-channel/lock/small-screen/#/gateDam?access_token=' + accessToken
    }

    if (location.href.includes('pre-yth')) {
      settings.bridgeArea = '/traffic-channel/pre-yth/bridge/small-screen/#/bridgeAreaControl-overall?access_token=' + accessToken;
      settings.gateDam = '/traffic-channel/pre-yth/lock/small-screen/#/gateDam?access_token=' + accessToken;
    }

    return settings;
  };

  const baseApi = `${import.meta.env.VITE_APP_BASE_API}admin/file`;
  const handleClick = (contents) => {
    let fileUrl = baseApi + contents.split("/file")[1];
    window.open(fileUrl);
    // let matchReg1 = /<a.*?(?:>|\/>)/gi;
    // let hrefReg = /href=[\'\"]?([^\'\"]*)[\'\"]?/i;
    // console.log(contents.match(matchReg1)[0].match(hrefReg)[1]);
    // try{
    //   let reg = /<a[^>]+href\s*=\s*['"]([^"']+)['"][^>]*>/gi      
    //   if(contents.match(reg)){         
    //     // window.open(`http://210.76.81.180/traffic-channel/notice${contents.match(reg)[0].slice(25,-2)}`);   
    //     window.open(`${import.meta.env.VITE_APP_BASE_API}notice${contents.match(reg)[0].slice(25,-2)}`);   
    //   }else{
    //     let matchReg = /<img.*?(?:>|\/>)/gi;
    //     let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
    //     let data = [];
    //     let arr = contents.match(matchReg);
    //     arr.forEach(item => {
    //       let src = item.match(srcReg);
    //       // data.push(`http://210.76.81.180/traffic-channel/notice${src[1]}`)
    //       data.push(`${import.meta.env.VITE_APP_BASE_API}notice${src[1]}`)
    //     });

    //     router.push({
    //       path: "/pdf",
    //       query: { content: data.join(',') },
    //       // replace: true
    //     });
    //   }   
    // }catch(error){
    //   // alert(error)
    // }    
  };

  onMounted(async() => {
    document.title = "智慧航道";
    
    optionData.value = await getProvinceWaterwayDataFn();
    noticeData.value = await getWaterwayNoticeThreeFn();
    // adminApprovalData.value = await adminApprovalFn();
    linkSettings.value = getLinkSettings();

    if(sessionStorage.getItem("watermarkTxt")){
      //加水印
      watermark.init({ 
        watermark_x: -30, // 水印起始位置x轴坐标
        watermark_y: -20, // 水印起始位置Y轴坐标
        watermark_x_space: 20, // 水印x轴间隔
        watermark_y_space: 80, // 水印y轴间隔
        watermark_alpha: 0.07, // 水印透明度
        watermark_fontsize: '14px', // 水印字体大小
        watermark_width: 100, // 水印宽度
        watermark_height: 30,
        watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
        watermark_angle: 25, // 水印倾斜度数
        watermark_rows: 0, // 水印行数
        watermark_cols: 0, // 水印列数
        watermark_font: '微软雅黑', // 水印字体
        watermark_color: 'black', // 水印字体颜色 
      });
    }
  });
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;  
    padding: 0;
    margin: 0;  
    box-sizing: border-box;
    position: relative;
    .bg-image{
      margin: 14px 20px;
      height: 120px;      
      color: #fff;
      font-size: 24px;
      .bg-title{
        position: absolute;
        left: 10%;
        top: 3%;
      }
      img{
        width: 100%;
        height: 125px;
      } 
    }
    .new-content{
      margin: 14px 20px 0px 20px;  
      .map{
        width: 100%;
        height: 275px;
        background-image:url('../../static/images/new-map.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        position: relative;
        .title{
          font-size: 18px;
          font-weight: 500;
          color: #fff;
          position: absolute;
          left: 8%;
          top: 4%;
        }
        .title::before{
          content: '';
          background-color: #fff;
          position: absolute;
          top: 50%;
          left: -15%;
          height: 18px;
          width: 4px;
          transform: translateY(-50%);
        }
        .count-info{
          position: absolute;
          bottom: 3%;
          right: 0;   
          width: 170px;      
          .item{
            color: #fff;
            font-weight: 300;
            display: flex;
            margin: 3px 0;
            .name{
              width: 45%;
              font-size: 12px;
              margin-right: 20px;
            }
            .value{
              width: 55%;
              font-size: 14px;
            }
          }
        }
      }          
    }
    .content{      
      margin: 14px 20px;
      background-color: #fff;
      border-radius: 8px;
      .title{  
        display: flex;    
        justify-content: space-between;
        align-items: center;  
        color: #000;
        font-size: 18px;
        font-weight: 500;
        padding: 10px 0px 10px 24px;
        position: relative;   
        border-bottom: 1px dotted #ccc;  
        .more{
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 500;
          color: #2A8BFD;
          margin-right: 16px;
          img{
            width: 8px;
            height: 12px;
            padding-left: 5px;
          }
        }
        .pass-through{
          font-size: 14px;
          color: #595959;
          .number{
            padding-left: 4px;
          }
        }   
      }
      .singleTitle{
        display: flex;    
        justify-content: space-between;
        align-items: center;  
        color: #000;
        font-size: 18px;
        font-weight: 500;
        padding: 10px 0px 10px 24px;
        position: relative;   
        .more{
          display: flex;
          align-items: center;
          font-size: 16px;
          font-weight: 500;
          color: #2A8BFD;
          margin-right: 16px;
          img{
            width: 8px;
            height: 12px;
            padding-left: 5px;
          }
        } 
      }
      .singleTitle::before{
        content: '';
        background-color: #2D78ED;
        position: absolute;
        top: 50%;
        left: 4%;
        height: 18px;
        width: 4px;
        transform: translateY(-50%);
      }
      .title::before{
        content: '';
        background-color: #2D78ED;
        position: absolute;
        top: 50%;
        left: 4%;
        height: 18px;
        width: 4px;
        transform: translateY(-50%);
      }
      .map-content{           
        margin: 0px 8px;    
        padding-top: 4px;
        .map{      
          width: 100%;
          height: 174px;
          background-image:url('../../static/images/new-map.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }      
      .count{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 12px 16px;
        font-size: 12px;
        .name{
          color: #595959;    
          font-weight: 400;      
        }
        .value{
          color: #000;
          font-weight: 800;
        }
      }
      .list{
        display: flex;
        flex-wrap: wrap; /*允许换行*/
        margin: 10px;
        .item{
          width: 25%;
          height: 100px;
          display: flex;
          flex-direction: column;
          align-items: center;
          // justify-content: center;          
          box-sizing: border-box;
          a {
            text-align: -webkit-center;
          }
          .icon{
            width: 42px;
            height: 42px; 
            img{
              width: 100%;
              height: 100%;
            }           
          }
          .name{
            color: #000;
            font-size: 12px;
            font-weight: 500;
            margin-top: 10px;
            text-align: center;
          }
        }
      }
      .notice{
        margin: 10px 16px;
        .top{
          color: #000000;
          font-size: 12px;
          font-weight: 400;
        }
        .bottom{
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          zoom: 0.8;
          font-weight: 400;
          color: #8C8C8C;
          margin: 10px 0;
          padding-bottom: 10px;
          border-bottom: 1px solid #F0F0F0;
        }
      }
      .notice:last-child{
        .bottom{
          border-bottom: none;
        }
      }
    } 
    .source{
      text-align: center;
      padding: 5px 0;
      color: #8C8C8C;
      .name{
        margin-bottom: 5px;
      }
    }       
  }
</style>